<template>
	<view class="padding-32">
		<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll">
			<view class="head" v-html="english_story"></view>
			<view class="title">
				故事抄写
			</view>
			<view class="upload_list">
				<view class="flex flex-wrap ">
					<view class="list" v-for="(i,v) in imgList" :key="v">
						<image :src="i" mode="" class="upload_img"></image>
						<image src="../../static/image/gb@2x.png" mode="" class="close_img" @click="delImg(i,v)">
						</image>
					</view>
					<image src="../../static/image/upload.png" mode="" class="upload_img" @click="chooseImg"
						v-if="imgList.length<3"> </image>
				</view>
				<view class="btn">
					<view class="flex flex-center items-center">
						<image src="../../static/alarm-icon.png" mode="" style="width: 32rpx; height: 32rpx;"></image>
						<view class="marginLeft-12 color-999 fontSize-24">
							抄一遍，相当于看十遍
						</view>
					</view>
					<view
						class="width-702 height-104 borderRadius-92 colorBj-51D580 color-white text-center marginTop-24"
						style="line-height: 104rpx;" @click='btnClick'>
						继续
					</view>
				</view>
			</view>
		</page-container>
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					坚持就是胜利！若您要坚持退出 下次记忆将接着此次记录继续
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						退出
					</view>
					<view class="popup_sure" @click="confirm">
						继续学习
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="uploadShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<view class="popup_pro">
					您抄写完故事记得上传图片哟！
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="jump">
						跳过
					</view>
					<view class="popup_sure" @click="chooseImg()">
						上传
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	const page = ref(1)
	const big_sort = ref(1)
	const small_sort = ref(1)
	const show = ref(false)
	const isShowPage = ref(true)
	const getStoryInfoApi = inject('getStoryInfo')
	const english_story = ref('')
	const imgList = ref([])
	const $uploadHttp = inject('$uploadHttp');
	const copeRemStoryApi = inject('copeRemStory')
	const uploadShow = ref(false)
	onLoad((op) => {
		page.value = op.page
		small_sort.value = op.small_sort
		big_sort.value = op.big_sort
		getStoryInfoApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value,
		}).then(res => {
			console.log(res,'55555555555555555')
			english_story.value=res.english_story
			// uni.navigateTo({
			// 	url: '/pagesA/reciteWords/addBoss?page='+page.value +'&small_sort='+small_sort.value +'&big_sort='+big_sort.value
			// })
		})
	})
	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const delImg = (i, v) => {
		imgList.value.splice(v, 1)
	}
	const confirm = () => {
		isShowPage.value = true
		show.value = false
	}
	const btnClick = () => {
		if (imgList.value.length == 0) {
			uploadShow.value = true
		} else {
			jump()
			
		}
	}
	const jump = () => {
		console.log(imgList.value,'66666666666')
		copeRemStoryApi({
			page: page.value,
			small_sort: small_sort.value,
			big_sort: big_sort.value,
			story_pics: imgList.value.join(',')
		}).then(res => {
			console.log(res, 106)
			english_story.value = res.english_story
		})
		uni.redirectTo({
			url: '/pagesA/reciteWords/addBoss?page='+page.value +'&small_sort='+small_sort.value +'&big_sort='+big_sort.value
		})
	}
	const chooseImg = () => {
		uni.chooseImage({
			count: 3, //默认9
			success: function(res) {
				console.log(res, 90)
				const tempFilePaths = res.tempFilePaths;
				uni.uploadFile({
					url: $uploadHttp,
					filePath: tempFilePaths[0],
					name: 'file',
					// formData: {
					// 	'user': 'test'
					// },
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						let data = JSON.parse(uploadFileRes.data)
						imgList.value.push(data.data)
						console.log(imgList.value, 103)
					}
				});


			}
		});
	}
</script>

<style scoped lang="scss">
	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;

		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}

		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 504rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}

		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

	}

	.head {
		width: 626rpx;
		// height: 152rpx;
		background: #F5F5F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 40rpx 30rpx;
		margin: 40rpx auto;

	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		padding: 32rpx;
	}

	.upload_list {
		padding: 0 32rpx;

		.list {
			position: relative;
		}

		.upload_img {
			width: 214rpx;
			height: 214rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-right: 16rpx;
		}

		.close_img {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 30rpx;
			top: 10rpx;
		}
	}

	.btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>